<template>
  <div class="order">
    <div>
      <div class="order-info">
        <div class="item">
          <div class="item">
            <div>订单号</div>
            <div>
              <el-input size="mini" placeholder=" 订单号" v-model="orderNo">
              </el-input>
            </div>
          </div>
          <div class="item">
            <div>收货人</div>
            <div>
              <el-input size="mini" placeholder="收货人" v-model="consignee">
              </el-input>
            </div>
          </div>

          <div class="item">
            <div>手机号</div>
            <div>
              <el-input size="mini" placeholder="手机号" v-model="phone">
              </el-input>
            </div>
          </div>
          <div class="item">
            <div>订单状态</div>
            <div>
              <el-select v-model="orderState" placeholder="订单状态">
                <el-option value="已受理"> </el-option>
                <el-option value="已完成"> </el-option>
                <el-option value="派送中"> </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="block">
        <span class="demonstration"> 选择时间</span>
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button
          style="margin-left: 15px"
          @click="clicksearch"
          size="small"
          type="primary"
          >查询</el-button
        >
      </div>
    </div>
    <div class="table-info">
      <el-table :data="orderinfo" border style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="120">
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="200">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="consignee" label="收货人"> </el-table-column>
        <el-table-column prop="deliverAddress" label="配送地址" width="150">
        </el-table-column>
        <el-table-column prop="deliveryTime" label="送达时间" width="150">
        </el-table-column>
        <el-table-column prop="remarks" label="用户备注"> </el-table-column>
        <el-table-column prop="orderAmount" label="订单金额"> </el-table-column>
        <el-table-column prop="orderState" label="订单状态"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="obj">
            <el-button type="info" size="small" @click="clickCheck(obj.row)"
              >查看</el-button
            >
            <el-button type="primary" size="small" @click="clickEdit(obj.row)"
              >编辑</el-button
            >
          </template></el-table-column
        >
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pagesizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="订单信息" :visible.sync="dialog">
      <div class="dialog-text">
        <span>订单号：{{ currentinfo.orderNo }}</span>
        <span>收货人：{{ currentinfo.consignee }}</span>
        <span>手机号：{{ currentinfo.phone }}</span>
      </div>
      <div class="dialog-text">
        <span>下单时间：{{ currentinfo.orderTime }}</span>
        <span>配送地址：{{ currentinfo.deliverAddress }}</span>
        <span>送达时间：{{ currentinfo.deliveryTime }}</span>
      </div>
      <div class="dialog-text">
        <span>用户备注：{{ currentinfo.remarks }}</span>
        <span>订单金额：{{ currentinfo.orderAmount }}</span>
        <span>订单状态：{{ currentinfo.orderState }}</span>
      </div>
    </el-dialog>
    <el-dialog title="修改信息" :visible.sync="dialog2">
      <div class="edit-text">
        <div class="edit-title">
          <p>订单号：</p>
        </div>
        <div class="edit-content">
          <el-input v-model="editinfo.orderNo"></el-input>
        </div>
      </div>
      <div class="edit-text">
        <div class="edit-title">
          <p>收货人：</p>
        </div>
        <div class="edit-content">
          <el-input v-model="editinfo.consignee"></el-input>
        </div>
      </div>
      <div class="edit-text">
        <div class="edit-title">
          <p>手机号：</p>
        </div>
        <div class="edit-content">
          <el-input v-model="editinfo.phone"></el-input>
        </div>
      </div>
      <div class="edit-text">
        <div class="edit-title">
          <p>下单时间：</p>
        </div>
        <div class="edit-content">
          <el-input v-model="editinfo.orderTime"></el-input>
        </div>
      </div>
      <div class="edit-text">
        <div class="edit-title">
          <p>配送地址：</p>
        </div>
        <div class="edit-content">
          <el-input v-model="editinfo.deliverAddress"></el-input>
        </div>
      </div>
      <div class="edit-text">
        <div class="edit-title">
          <p>用户备注：</p>
        </div>
        <div class="edit-content">
          <el-input v-model="editinfo.remarks"></el-input>
        </div>
      </div>
      <div class="edit-text">
        <div class="edit-title">
          <p>订单金额：</p>
        </div>
        <div class="edit-content">
          <el-input v-model="editinfo.orderAmount"></el-input>
        </div>
      </div>
      <div class="edit-text">
        <div class="edit-title">
          <p>订单状态：</p>
        </div>
        <div class="edit-content">
          <el-select v-model="editinfo.orderState" placeholder="订单状态">
            <el-option value="已受理"> </el-option>
            <el-option value="已完成"> </el-option>
            <el-option value="派送中"> </el-option>
          </el-select>
        </div>
      </div>
      <div class="edit-text">
        <div class="edit-title">
          <p>送达时间：</p>
        </div>
        <div class="edit-content">
          <el-input v-model="editinfo.deliveryTime"></el-input>
        </div>
      </div>
      <div class="edit-text">
        <el-button @click="dialog2 = false">取消</el-button>
        <el-button type="primary" @click="editConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { $_orderlist, $_editOrder } from "@/apis/order";
import { getChinatime } from "@/utils/utils";
export default {
  created() {
    this.reqTable();
  },
  data() {
    return {
      currentPage: 1, //当前第几页
      pageSize: 8, // 当前页的条数
      total: 0, // 总条数
      pagesizes: [8, 16, 25, 30], //每页显示条数数组
      orderNo: "", //订单号
      consignee: "", //收货人
      phone: "", //手机号
      orderState: "", //订单状态
      date: "", //时间
      dialog: false,
      dialog2: false,
      orderinfo: [],
      currentinfo: [],
      editinfo: [],
    };
  },
  methods: {
    clicksearch() {
      $_orderlist({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        orderNo: this.orderNo,
        consignee: this.consignee,
        phone: this.phone,
        orderState: this.orderState,
        date: this.date,
      }).then((res) => {
        for (let obj of res.data.data) {
          obj.deliveryTime = getChinatime(obj.deliveryTime);
          obj.orderTime = getChinatime(obj.orderTime);
        }
        this.total = res.data.total;
        this.orderinfo = res.data.data;
      });
    },
    reqTable() {
      $_orderlist({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        for (let obj of res.data.data) {
          obj.deliveryTime = getChinatime(obj.deliveryTime);
          obj.orderTime = getChinatime(obj.orderTime);
        }
        this.total = res.data.total;
        this.orderinfo = res.data.data;
      });
      this.reqTable();
    },
    handleSizeChange(newsize) {
      this.pageSize = newsize;
    },
    handleCurrentChange(newpage) {
      this.currentPage = newpage;
      this.reqTable();
    },
    clickCheck(row) {
      this.dialog = true;
      this.currentinfo = row;
    },
    clickEdit(row) {
      this.dialog2 = true;
      this.editinfo = row;
    },
    editConfirm() {
      this.$confirm("此操作将修改该订单信息, 是否继续?", "敏感操作慎重选择", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        $_editOrder({
          id: this.editinfo.id,
          orderNo: this.editinfo.orderNo,
          orderTime: this.editinfo.orderTime,
          phone: this.editinfo.phone,
          consignee: this.editinfo.consignee,
          deliverAddress: this.editinfo.deliverAddress,
          deliveryTime: this.editinfo.deliveryTime,
          remarks: this.editinfo.remarks,
          orderAmount: this.editinfo.orderAmount,
          orderState: this.editinfo.orderState,
        }).then((res) => {
          if (res.data.code == 0) {
            this.dialog2 = false;
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.reqTable();
          }
        });
      });
    },
  },
};
</script>

<style lang='less' scoped>
.order {
  padding: 10px;
  background-color: #fff;
  .order-info {
    .item {
      display: flex;
      align-items: center;
      margin: 5px;
    }
  }
  .table-info {
    margin-top: 20px;
  }
  .page {
    margin-top: 40px;
  }
  .dialog-text {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 20px;
  }
  .edit-text {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .edit-title {
      width: 100px;
    }
    .edit-content {
      flex: 1;
    }
  }
}
</style>